<!-- 分账关系 -->
<template>
  <div class="page-box h100 display-flex czbj dfdscxvrety">
    <p class="title-label mb10">
      分账关联<span class="red"
        >请设置分账的账号，不在此列表的用户不能分账</span
      >
    </p>
    <div class="pm20">
      <n-button type="info" @click="showModal=true" :loading="lkxcdf"> 添加账号 </n-button>
    </div>
    <n-table :single-line="false" >
      <thead>
        <tr>
          <th>支付宝账号</th>
          <th>openid</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="sd in receiverList">
          <td>{{ sd.loginName }}</td>
          <td>{{ sd.accountOpenId }}</td>
          <td>
            <n-button type="error" @click="jixcxzcrty(sd.accountOpenId)"> 解绑 </n-button>
          </td>
        </tr>
      </tbody>
    </n-table>
    <n-modal v-model:show="showModal" preset="card" class="xcxzssdrtyrty">
      <template #header>
        <div>添加账号</div>
      </template>
      <div class="display-flex">
        <n-input v-model:value="pidval" type="text" placeholder="请输入pid" />
       
      </div>

      <div class="ls sz mt10 pr">
            <span>点击查看在哪获取pid</span>
          <n-image
          class="zxcxzcrtrytry"
            src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/yx/yuyue/pisdr.png"
          /> 
        </div>
      <template #action>
        <div class="tr">
        
          <n-button type="info" @click="jmxcxdsf"> 确认 </n-button>
          <n-button class="ml20" @click="showModal=false"> 关闭 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { NButton } from "naive-ui";
import {
  dxget,
  dxpost,
  qurl,
  hf,
  transferTimeYMD,
  callBack,
} from "../../util/index";
const showModal = ref(false);
const receiverList = ref([]);
const lkxcdf = ref(false)
const pidval = ref();
const initData = async () => {
  const { data } = await dxget("meirong/index/chasdff");
  receiverList.value = data.receiverList;
};
initData();


const jixcxzcrty= async(account)=>{
    const sdfdf =await dxget("meirong/index/djnnxdfd",{account})
    window.$message.success("操作成功")
    setTimeout(() => {
        initData()
    }, 2000);
}

const jmxcxdsf = async()=>{
    if(!pidval.value){
        window.$message.error("请输入pid")
        return
    }
    lkxcdf.value = true
    await dxget("meirong/index/fnbsdf",{
        account:pidval.value
    })
    window.$message.success("操作成功")
    showModal.value = false
    setTimeout(() => {
        initData()
        lkxcdf.value = false
    }, 2000);
}
</script>
<style scoped>
    .zxcxzcrtrytry{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* opacity: 0; */
        background: red;
        opacity: 0;
    }
</style>
